{% extends "layout/public_manage.html" %}

    {% block meta %}
    <title>公司管理</title>
    {% endblock %}

    {% block link %}
    <!--日期-->
    <link rel="stylesheet" href="{{ url_for('static', filename='plugins/jedate/jedate.css') }}">
    {% endblock %}

{% block content %}
<div style="padding: 0 15px;" id="content">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-md-10">
            <h2>公司管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a>系统管理</a>
                </li>
                <li>
                    <a>组织机构管理</a>
                </li>
                <li>
                    <strong>公司管理</strong>
                </li>
            </ol>
        </div>
        <div class="col-md-2">

        </div>
    </div>
    <!--table 表格-->
    <div class="row">
        <div class="col-md-12">
            <!--<table id="table"></table>-->
            <div class="ibox border-all">
                <div class="ibox-title">
                    <h5>机构管理</h5>
                </div>
                <div class="ibox-content" style="position: relative;">
                    <button class="btn btn-default pull-right my-btn my-btn-remove" onclick="deleteBtnClick()">删除</button>
                    <button class="btn btn-default pull-right my-btn my-btn-pencil" onclick="editBenClick()">编辑</button>
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
                    <button class="btn btn-default my-btn my-search-btn my-btn-search" style="top: 16px;left: 222px;">查询</button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th></th>
                            <th data-field="name">公司名称</th>
                            <th data-field="english_name">外文名称</th>
                            <th data-field="chinese_name">中文名称</th>
                            <th data-field="character">公司性质</th>
                            <th data-field="time">成立时间</th>
                            <th data-field="person_in_charge">负责人</th>
                            <th data-field="management_scope">经营范围</th>
                            <th data-field="description">备注</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!--添加 模态框-->
    <div id="modal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}机构</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-6">
                        <label class="manage-title">公司名称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
                        <input type="text" class="form-control form-manage" placeholder="请输入公司名称" v-model="modalData.name">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">公司性质<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
                        <select class="form-control form-manage" style="padding: 0;" v-model="modalData.character">
                            <option value="===请选择===">===请选择===</option>
                            <option value="国家机关">国家机关</option>
                            <option value="房地产">房地产</option>
                            <option value="建筑业">建筑业</option>
                            <option value="社会服务业">社会服务业</option>
                            <option value="互联网">互联网</option>
                            <option value="制造业">制造业</option>
                            <option value="金融业">金融业</option>
                            <option value="其他业">其他业</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">外文名称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
                        <input type="text" class="form-control form-manage" placeholder="请输入外文名称" v-model="modalData.english_name">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">中文名称<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
                        <input type="text" class="form-control form-manage"  placeholder="请输入中文名称" v-model="modalData.chinese_name">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">编码<span class="glyphicon glyphicon-asterisk mandatory"></span></label>
                        <input type="text" class="form-control form-manage"  placeholder="请输入编码" v-model="modalData.code">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">上级公司：</label>
                        <input id="company" class="form-control form-manage" autocomplete="off" placeholder="===请选择==="
                               v-model="modalDataParentName">
                        <ul id="companyTree" class="ztree modalZTree border-all" style="left: 80px;width: 186px;">
                            <li v-if="treeLoading">正在加载中,请稍后.....</li>
                            <li v-if="!treeLoading && treeList.length==0">暂时没有数据,请添加</li>
                        </ul>
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">成立时间：</label>
                        <input class="form-control form-manage" id="testy" placeholder="===请选择==="  readonly
                               v-model="modalData.set_up_time">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">负责人：</label>
                        <input type="text" class="form-control form-manage" placeholder="" v-model="modalData.person_in_charge">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">电话：</label>
                        <input type="text" class="form-control form-manage"  placeholder="" v-model="modalData.phone_number">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">电子邮箱：</label>
                        <input type="text" class="form-control form-manage" placeholder="" v-model="modalData.email">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">传真：</label>
                        <input type="text" class="form-control form-manage"  placeholder="" v-model="modalData.fax">
                    </div>
                    <div class="form-group col-xs-12">
                        <label class="manage-title">公司地点：</label>
                        <!--省-->
                        <select class="form-control form-province" @change="changeProvince" v-model='provinceData'>
                            <option value="">请选择</option>
                            <option v-for="(item,index) in province"  :value="item">{{item.name}}</option>
                        </select>
                        <!--市-->
                        <select class="form-control form-province" @change="changeCity" v-model='cityData'>
                            <option value="">请选择</option>
                            <option v-for="(item,index) in city"  :value="item">{{item.name}}</option>
                        </select>
                        <!--区-->
                        <select class="form-control form-province" v-model='areaData'>
                            <option value="">请选择</option>
                            <option v-for="(item,index) in area"  :value="item">{{item.name}}</option>
                        </select>
                        <input type="text" placeholder="请输入详细地址" class="form-control form-province form-provinceDeta" v-model="modalData.location">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">邮编：</label>
                        <input type="text" class="form-control form-manage" placeholder="" v-model="modalData.zip_code">
                    </div>
                    <div class="form-group col-xs-6">
                        <label class="manage-title">公司官网：</label>
                        <input type="text" class="form-control form-manage"  placeholder="" v-model="modalData.web">
                    </div>
                    <div class="form-group col-xs-12">
                        <label class="manage-title">经营范围：</label>
                        <input type="text" class="form-control form-manage form-manage2"  placeholder="" v-model="modalData.management_scope">
                    </div>
                    <div class="form-group col-xs-12">
                        <label class="manage-title">备注：</label>
                        <textarea class="form-control form-manage form-manage2" style="resize: none" v-model="modalData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" id="add" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">是否删除当前项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
</div>
{% endblock %}

{% block script %}
<!--Ztreegrid-->
<script src="{{ url_for('static', filename='plugins/bootstrap-table/bootstrap-table-tree.js') }}"></script>
<!-- Toastr -->
<script src="{{ url_for('static', filename='plugins/toastr/toastr.min.js') }}"></script>
<!--日期-->
<script src="{{ url_for('static', filename='plugins/jedate/jedate.js') }}"></script>

<script>
    var vm = new Vue({
        el: '#content',
        data: {
            treeLoading:true,           //树结构加载判断
            treeList:[],                //zTree结构
            province:[],                //省
            provinceData:'请选择',      //省选择后的值
            city:[],                    //市
            cityData:'请选择',          //市选择后的值
            area:[],                    //区 县
            areaData:'请选择',          //区县选择后的值
            modalDataParentName:'',     //模态中选定树的名称
            modalType:'',
            modalData:{                         //模态输入框中的值
                name: "",                       //名称
                code:'',                        //编码
                description: null,              //描述
                dis_order: null,                //排序
                status: 0,                      //状态(0|1 0表示该机构在系统中正常 1表示该机构在系统中被禁用)
                chinese_name:'',                //中文名
                english_name:'',                //英文名
                ParentId:null,                 //上级公司id
                set_up_time:'',                 //成立时间
                person_in_charge:'',            //负责人
                phone_number:'',                //电话
                email:'',                       //邮箱
                fax:'',                         //传真
                location:'',                    //地址
                zip_code:'',                    //邮编
                web:'',                         //网站
                management_scope:'',            //经营范围
                character:''                   //公司性质
            }
        },
        methods:{
            //省获取市
            changeProvince: function (ele) {
                if(!vm.provinceData){
                    vm.cityData = '请选择';
                    vm.city = [];
                    vm.areaData = '请选择';
                    vm.area = [];
                }
                //通过value 获取市信息
                if(vm.provinceData.id){
                    $.ajax({
                        url: '/core/area/get_city/',
                        type: 'POST',
                        dataType: "json",
                        data: JSON.stringify({"id":vm.provinceData.id}),
                        async: true,
                        contentType: "application/json",
                        success: function (response) {
                            if(response && response.success==1){
                                vm.city = response.data;
                            }
                        }
                    });
                }
            },
            //市获取县
            changeCity: function () {
                if(!vm.cityData){
                    vm.areaData = '请选择';
                    vm.area = [];
                }
                //通过value 获取县信息
                if(vm.cityData.id){
                    $.ajax({
                        url: '/core/area/get_county/',
                        type: 'POST',
                        dataType: "json",
                        data: JSON.stringify({"id":vm.cityData.id}),
                        async: true,
                        contentType: "application/json",
                        success: function (response) {
                            if(response && response.success==1){
                                vm.area = response.data;
                            }
                        }
                    });
                }
            }
        }
    });
    //获取table tree的值并绘制
    function tableList() {
        //获取bootstrapTable的树结构
        vm.treeLoading = true;
        $.ajax({
            url: '/core/organization/get_all/',
            type: 'POST',
            dataType: "json",
            data:'',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.treeList = response.data;
                    $table.bootstrapTable('load', vm.treeList);
                    //权限模态中树绘制
                    $("#companyTree").ProTree({
                        arr: vm.treeList,
                        ParentId:0,
                        callback: function (id, name, url) {
                            //为 modalData.parent 赋值
                            vm.modalDataParentName = name;
                            vm.modalData.ParentId = id;
                        }
                    });
                }
                vm.treeLoading = false;
            }
        });
    }

    function onBodyDown(event) {
        if (!(event.target.id == "company" ||event.target.id == "companyTree" || $(event.target).parents("#companyTree").length>0)) {
            $("#companyTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }
    $('#company').click(function () {
        $("#companyTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });

    $table = $('#table');
    //bootstrapTable配置
    $table.bootstrapTable({
        toolbar: '#toolbar',
        sidePagination: 'client',
        pagination: false,
        treeView: true, //treeView:true表示启用树表格模式
        treeId: "id",   //treeId:'id'表示每一行tree的id
        treeField: "name",      //treeField:'Name'表示要对那一列进行展开
        treeRootLevel: 1,       //treeRootLevel:1表示树根的级别
        clickToSelect: true,
        collapseIcon: "glyphicon glyphicon-menu-right",//折叠样式
        expandIcon: "glyphicon glyphicon-menu-down",//展开样式
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }]
    });

    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r,row,element){
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.modalData = row;
    });

    //添加按钮被点击
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalData = {
            name: "",                       //名称
            code:'',                        //编码
            description: null,              //描述
            dis_order: null,                //排序
            status: 0,                      //状态(0|1 0表示该机构在系统中正常 1表示该机构在系统中被禁用)
            chinese_name:'',                //中文名
            english_name:'',                //英文名
            ParentId:null,                 //上级公司id
            set_up_time:'',                 //成立时间
            person_in_charge:'',            //负责人
            phone_number:'',                //电话
            email:'',                       //邮箱
            fax:'',                         //传真
            location:'',                    //地址
            zip_code:'',                    //邮编
            web:'',                         //网站
            management_scope:'',            //经营范围
            character:''                    //公司性质
        };
        vm.modalType = "添加";
        $('.table-line-active').removeClass('table-line-active');
        $("#modal").modal('show');
    };

    //编辑按钮被点击
    function editBenClick() {
        if (!vm.modalData.id) {
            toastr.info("编辑时最少需要选中一行!");
            return
        }
        //将当前行的属性添加给 modalData 供模态框绑定
        vm.modalType = "修改";
        $("#modal").modal('show');
    }

    //删除按钮被点击
    function deleteBtnClick() {
        if (!vm.modalData.id) {
            toastr.info("删除时最少需要选中一行!");
            return
        }
        $("#deleteModal").modal('show');
    }

    //删除表格中一项
    function deleteTable(){
        $.ajax({
            url:'/core/organization/del/',
            type: 'POST',
            dataType: "json",
            data:JSON.stringify({id:vm.modalData.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $("#deleteModal").modal('hide');
                    //获取zTree信息 并且绘制
                    tableList();
                    toastr.success('删除成功');
                }else{
                    toastr.info(response.error_msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //添加 编辑一行
    function add() {
        if(!vm.modalData.name){toastr.info('公司名称不能为空!');return}
        if(vm.modalData.character == '===请选择==='){toastr.info('公司性质不能为空!');return}
        if(!vm.modalData.character){toastr.info('公司性质不能为空!');return}
        if(!vm.modalData.english_name){toastr.info('外文名称不能为空!');return}
        if(!vm.modalData.chinese_name){toastr.info('中文名称不能为空!');return}
        vm.modalData.set_up_time =  $('#testy').val();
        var newModalData = copyFun(vm.modalData);
        newModalData.location = vm.provinceData.name+"-"+vm.cityData.name+vm.areaData.name+" "+newModalData.location;
        // 修改
        if(vm.modalType=="修改"){
            $.ajax({
                url:'/core/organization/edit/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //获取zTree信息 并且绘制
                        tableList();
                        toastr.success('修改成功')
                    }else{
                        toastr.info(response.error_msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else{
            $.ajax({
                url:'/core/organization/add/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response){
                    if(response && response.success==1){
                        $("#modal").modal('hide');
                        //获取zTree信息 并且绘制
                        tableList();
                        toastr.success('添加成功');
                    }else{
                        toastr.info(response.error_msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    }
    //日期定义
    jeDate({
        dateCell: '#testy',
        format: 'YYYY-MM-DD', // 分隔符可以任意定义，该例子表示只显示年月
        choosefun:function(val) {
            vm.modalData.set_up_time = val;
        }
    });
    //dom渲染完成后加载
    $(document).ready(function () {
        //获取table信息 并且绘制
        tableList();
        //获取省信息
        $.ajax({
            url:'/core/area/get_province/',
            type: 'POST',
            dataType: "json",
            data:'',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.province = response.data;
                }else{
                    toastr.info(response.error_msg);
                }
            }
        });
    });
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };

</script>
{% endblock %}
